<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 300px;
            height: 300px;
            background-color: #4dCE04;
        }
        #box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #box3{
            width: 150px;
            height: 150px;
            background-color: #3A87EF;
        }
    </style>
    <script>
        window.onload=function () {
            var box1=document.getElementById("box1");
            var box2=document.getElementById("box2");
            var box3=document.getElementById("box3");
            bind(box1,"click",function () {
                alert("这是box1的响应函数")
            });
            bind(box2,"click",function () {
                alert("这是box2的响应函数");
            });
            bind(box3,"click",function () {
                alert("这是box3的响应函数");
            });
        };
        function bind(obj,eventStr,callback) {
        if (obj.addEventListener){
            obj.addEventListener(eventStr ,callback,false);
        }else {
            obj.attachEvent("on"+eventStr,function () {
            callback.call(obj);
            });
        }
        }
    </script>
</head>
<body>
<script>
    /*事件的传播 关于这个 网景公司和微软公司有不同的解释，
    *   微软公司认为事件应该是有内向外传播，即当事件触发时，应该先触发当前元素上的事件
    *           然后在向当前元素的祖先元素上传播，即事件应该在冒泡阶段执行
    *   网景公司认为事件应该是有外向内传播的，即当前事件触发时，应先触发当前元素最外层的祖先元素的事件，然后在传给后代元素
    *   W3C综合了两个公司的方案，将事件传播分成三个阶段
    *       1.捕获阶段
    *           在捕获阶段时从最外层的祖先元素，想目标元素进行事件的捕获，但是默认此时不会触发事件
    *       2.目标阶段
    *           事件捕获到目标后，捕获结束开始在目标元素上触发事件
    *       3.冒泡阶段
    *           事件从目标元素向它的祖先元素传递 依次触发祖先元素上的事件
    *   如果希望在捕获阶段就触发事件，可以将addElementListener()的第三个参数设置为true
    *   一般情况下 我们不希望在捕获阶段就触发事件。所以这个参数都是false
    *  本章节了解
    *   IE8及以下的版本没有捕获阶段
    *
    * */
</script>
<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
</body>
</html>